<template>
  <div class="security-verification-container">
    <u-navbar
      title="安全认证"
      :title-bold="false"
    ></u-navbar>
    <div class="input-title">
      <span class="title_text">本次登录需安全验证</span>
    </div>
    <div class="input-text">
      <!-- 加密手机号 -->
      <p class="text-tips" style="margin: 32px 0 10px">手机号</p>
      <div class="input-name phone-number">
        <span v-for="i in 7" :key="i" class="dot"></span>{{ securityVerificationForm.encryptionPhoneNumber }}
      </div>

      <p class="text-tips" style="margin: 20px 0 10px">短信验证</p>
      <div style="position: relative">
        <input
          class="input-name"
          type="text"
          v-model="messageCode"
          placeholder="请输入短信验证码"
          :class="{ 'input-name-error': !smsCodeInputStatus }"
        />
        <div class="sendCode" @click="sendCode">
          <span v-if="countdown <= 0">发送验证码</span>
          <span v-else>{{ countdown }}秒后可重新获取</span>
        </div>
      </div>
    </div>

    <div class="submit-operate">
      <u-button
        style="margin-top: 80rpx"
        type="primary"
        :disabled="!messageCode"
        :customStyle="{
          background: messageCode ? '#FF874FFF' : '#DDDDDDFF',
        }"
        :loading="okLoading"
        @click="handleSubmit"
        >登录</u-button
      >
    </div>
    <!-- 图片验证码弹窗 -->
    <imgCodeModal ref="imgCodeModalRef" @success="handleImgCodeSuccess" />
  </div>
</template>

<script>
  import { loginAuth, getUserInfo } from "@/api/qccx";
  import imgCodeModal from './components/img-code-modal.vue'
  export default {
    components: {
      imgCodeModal,
    },
    emits: ['changeIndex', 'login2GetUser'],
    data() {
      return {
        okLoading: false,
        messageCode: '',
        smsCodeInputStatus: true,
        countdown: 0,
        securityVerificationForm: {},
      }
    },
    onShow() {
      this.securityVerificationForm = uni.getStorageSync('securityVerificationForm') || {}
    },
    methods: {
      /**
       * 发送短信验证码
       */
      sendCode() {
        if (this.countdown > 0) return
        const param = {
          userName: this.securityVerificationForm.userName,
          password: this.securityVerificationForm.password,
        }
        this.$refs.imgCodeModalRef.open(param, 'securityVerify')
      },
      /**
       * 短信发送成功
       */
      handleImgCodeSuccess() {
        this.countdown = 59 // 立即进入倒计时
        const timer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      },
      /**
       * 登录
       */
      handleSubmit() {
        this.okLoading = true;
        loginAuth({
          userName: this.securityVerificationForm.userName,
          password: this.securityVerificationForm.password,
          messageCode: this.messageCode,
        }).then((res) => {
          this.okLoading = false;
          if (res.code == 200) {
            if (res.result.status) {
              this.afterLogin()
            } else {
              uni.showToast({
                icon: "none",
                title: res.result.message,
              });
            }
          }
        }).catch(() => {
          this.okLoading = false;
        })
      },
      // 登录成功后的回调
      afterLogin() {
        // 获取用户信息
        getUserInfo({}).then((res) => {
          if (res.code == 200) {
            const result = res.result;
            const userInfo = result.userInfo;
            this.$store.commit("SET_USER_INFO", userInfo);

            // 获取按钮权限
            this.$store
              .dispatch("GET_PERMISSION")
              .then(() => {
                this.okLoading = false;
                this.form = {};
                uni.reLaunch({
                  url: "/pages_qccx/index",
                });
              })
              .catch(() => {
                this.okLoading = false;
              });
          }
        });
      },
    },
  }
</script>

<style lang="less" scoped>
  .security-verification-container {
    padding: 40rpx 20rpx;
    .input-text {
      .input-name {
        width: 100%;
        height: 80rpx;
        border-radius: 6rpx;
        font-size: 28rpx;
        font-weight: 400;
        opacity: 1;
        border: 2rpx solid #c5c6cd;
        outline-style: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 36rpx;
        box-sizing: border-box;
      }
      .input-name:focus {
        outline: none;
        border: 2rpx solid #165dff;
      }
      .input-name-error {
        outline: none;
        border: 2rpx solid #ff5b5a;
      }
      .phone-number {
        display: flex;
        align-items: center;
        color: #c9cdd4;
        .dot {
          width: 12rpx;
          height: 12rpx;
          background-color: #c9cdd4;
          display: inline-block;
          border-radius: 50%;
          margin-right: 4rpx;
        }
      }
    }
    .submit-operate {
      margin-top: 36rpx;
    }
    .input-title {
      .title_text {
        font-size: 52rpx;
        font-weight: 600;
        color: #1e1e1e;
      }
    }
    .text-tips {
      height: 22px;
      font-size: 28rpx;
      font-weight: 400;
      color: #86909c;
      line-height: 22px;
    }
    .error-text {
      height: 22px;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff5b5a;
      line-height: 22px;
      margin-top: 11px;
    }
    .sendCode {
      border-left: 1px solid #c5c6cd;
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 28rpx;
      font-size: 28rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-weight: 400;
      color: #ff874f;
      cursor: pointer;
      &:hover {
        font-weight: 500;
      }
    }
  }
</style>
